<script setup lang="ts">
import {defineProps} from "vue";
import {BaseContainerMaterialType} from "@/data-type/material.type";
import {SmoothDndContainer} from "@/components/smooth-dnd/SmoothDndContainer"
import {SmoothDndDraggable} from "@/components/smooth-dnd/SmoothDndDraggable"
import MaterialRender from "@/material/MaterialRender.vue"
import {useMaterialInstanceStore} from "@/stores/material.instance";
import {storeToRefs} from "pinia";

const materialInstanceStore = useMaterialInstanceStore();
const {materialInstanceList, selectedMaterialInstanceId} = storeToRefs(materialInstanceStore);

const props = defineProps<{material:BaseContainerMaterialType}>();
  const text = {
    type: 'baseContainer',
    props: {
      content: '容器物料'
    },
    children: []
  }
</script>

<template>
  <div class="zhtt-container-material"
  >
    <div class="zhtt-container-tools"><span>删除</span></div>
    <SmoothDndContainer

        :class="props?.material?.class"
        group-name="blocks"
        :orientation="props.material?.props?.orientation || 'vertical'"
        tag="div"
        @mouseenter="()=>{
            materialInstanceStore.setParentContainerId(props.material?.id);
          }"
        @mouseleave="()=>{
            materialInstanceStore.setParentContainerId(null);
          }"
        :removeOnDropOut=true
        @drop="(item, index) => {
            const newItems = materialInstanceStore.applyDrag(materialInstanceList, item, props.material?.id);
            return materialInstanceStore.replaceAll(newItems);
          }"
    >
      <SmoothDndDraggable
          v-for="item in props.material?.children"
          :key="item.id"
          @mouseenter.stop="()=>{materialInstanceStore.setMouseEnterMaterialInstanceId(item.id)}"
          :class="{'zhtt-item': true, 'zhtt-active': item.id === selectedMaterialInstanceId, 'zhtt-item-inlineblock': item?.class?.inlineblock}"
      >
          <MaterialRender
              @click.stop="materialInstanceStore.setSelectedMaterialInstanceId(item);"
              :materialType="item"
          ></MaterialRender>
      </SmoothDndDraggable>
    </SmoothDndContainer>
  </div>
</template>

<style scoped>
.zhtt-container-material{
  min-height:45px;margin:0;padding:2px;background: rgba(232,236,245,0.8);
}
</style>
